<template>
  <div class="sustainability-container">
    <!-- 顶部横幅 -->
    <div class="hero-banner">
      <div class="logo-container">
        <div class="logo">

          <div class="brand-text">
            <div class="brand-name">LANNUAN Sustainability</div>
            <div class="brand-slogan">Rooted in Nature. Elevated by Design.</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 产品展示区域 -->
    <div class="product-showcase">
      <div class="showcase-grid">
        <!-- 第1列 - 左侧大图 -->
        <div class="model-card col-1">
          <a-image style=" border-radius: 8px;" src="https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250516134317/20250516134317_6826d075196cb.webp" alt="Female model wearing denim jacket" :preview="false" />
        </div>

        <!-- 第2列 - 上文字下图片 -->
        <div class="col-2">
          <!-- 上半部分 - 文字和按钮 -->
          <div class="eco-message">
            <h2 class="message-title">To inspire our</h2>
            <h3 class="message-subtitle">customers to feel passionate</h3>
            <p class="message-description">and confident </p>
<!--            <p class="message-description">about their style</p>-->
            <a href="/" title="Shop LANNUAN Eco" target="_self">
              <a-button class="shop-button" type="primary">Shop LANNUAN</a-button>
            </a>
          </div>

          <!-- 下半部分 - 手袋图片 -->
          <div class="model-card">
            <a-image src="https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250516141402/20250516141402_6826d7aa5789f.webp" alt="Eco-friendly handbag" :preview="false" style=" border-radius: 8px;" />
          </div>
        </div>

        <!-- 第3列 - 两张图片 -->
        <div class="col-3">
          <!-- 上半部分 -->
          <div class="model-card upper">
            <a-image src="https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250516134627/20250516134627_6826d133581b8.webp" alt="Female model wearing green blazer" :preview="false" style=" border-radius: 8px;" />
          </div>

          <!-- 下半部分 -->
          <div class="model-card lower">
            <a-image src="https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250516134852/20250516134852_6826d1c4e8d42.webp" alt="Male model sitting" :preview="false"  style=" border-radius: 8px;"/>
          </div>
        </div>

        <!-- 第4列 - 右侧大图 -->
        <div class="model-card col-4">
          <a-image src="https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250516135024/20250516135024_6826d22077dbd.webp" alt="Male model wearing denim jacket" :preview="false" style=" border-radius: 8px;" />
        </div>
      </div>
    </div>

    <!-- 材料介绍区域 -->
    <div class="materials-section">
      <h2 class="section-title">What We're Made Of</h2>
      <div
        class="materials-container"
        ref="materialsContainerRef"
        @scroll="handleMaterialsScroll"
      >
        <div
          v-for="(material, index) in sustainableMaterials"
          :key="index"
          class="material-image"
        >
          <a-image :src="material.image" :alt="material.title" :preview="false" />

          <div class="material-label">
            <div class="material-title">
              <span>{{ material.title }}</span>
              <span class="plus-icon"></span>
            </div>
            <div class="material-description">
              {{ material.description }}
            </div>
          </div>
        </div>
      </div>

      <div class="pagination">
        <span
          v-for="i in Math.ceil(sustainableMaterials.length / 4)"
          :key="i-1"
          class="dot"
          :class="{ active: activeIndex === i-1 }"
          @click="scrollToIndex(i-1)"
        ></span>
      </div>
    </div>

    <!-- 品牌使命区域 -->
    <div class="brand-mission">
      <h2 class="mission-title">Our Brand</h2>
      <p class="mission-text">LANNUAN has been shaping the fashion industry with bold designs, innovation, and a spirit of reinvention.</p>
    </div>

    <!-- 责任项目区域 -->
    <div class="responsibility-projects">
      <div class="project-grid">
        <div class="project-card">
          <div class="project-image">
            <a-image src="https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250516142549/20250516142549_6826da6ddafce.webp" alt="Cotton Production" :imgStyle="{ 'object-fit': 'cover', 'aspect-ratio': '16 / 9' }"  :preview="false"/>
          </div>
          <div class="project-info">
            <h3 class="project-title">Corporate Social Responsibility</h3>
            <p class="project-description">
              We believe that a collaborative approach to addressing systemic social challenges within the industry will produce more sustainable solutions. Working with supplier partners to ensure
              <a href="#" class="text-link">international standards</a> for
              <a href="#" class="text-link">human and labor rights</a> are upheld, LANNUAN coordinates oversight and remediation efforts, and has developed supplier training and a program for worker empowerment.
            </p>
          </div>
        </div>

        <div class="project-card">
          <div class="project-image">
            <a-image src="https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250516142639/20250516142639_6826da9f2ef61.webp" alt="Eco Jeans" :imgStyle="{ 'object-fit': 'cover', 'aspect-ratio': '16 / 9' }"  :preview="false"/>
          </div>
          <div class="project-info">
            <h3 class="project-title">The Future of Eco-Fashion</h3>
            <p class="project-description">
              As more sustainable fabrics and processing technologies emerge, we evaluate them for potential use. We assess each approach to make sure the fibers or fabrics they produce align with the LANNUAN brand and our customers' expectations for fit and fashion. We are selective about the sustainable initiatives we pursue so that we can embrace each one fully, apply it correctly, and include partners to achieve the best result in our finished products.
            </p>
          </div>
        </div>

<!--        <div class="project-card">-->
<!--          <div class="project-image">-->
<!--            <a-image src="https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250516142717/20250516142717_6826dac575479.webp" alt="Forest" :imgStyle="{ 'object-fit': 'cover', 'aspect-ratio': '16 / 9' }" :preview="false" />-->
<!--          </div>-->
<!--          <div class="project-info">-->
<!--            <h3 class="project-title">LANNUAN x One Tree Planted</h3>-->
<!--            <p class="project-description">-->
<!--              We aim for all LANNUAN associates to feel comfortable and safe bringing their authentic selves to work and contributing fully to our shared success. To exemplify this belief as a priority, we've added Diversity and Inclusion to our annual performance review, with plans to redevelop our Diversity and Inclusion Council in Europe as well.-->
<!--            </p>-->
<!--          </div>-->
<!--        </div>-->

<!--        <div class="project-card">-->
<!--          <div class="project-image">-->
<!--            <a-image src="https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250516142832/20250516142832_6826db1089956.webp" alt="LANNUAN Store" :imgStyle="{ 'object-fit': 'cover', 'aspect-ratio': '16 / 9' }" :preview="false"/>-->
<!--          </div>-->
<!--          <div class="project-info">-->
<!--            <h3 class="project-title">Greening Our Operations</h3>-->
<!--            <p class="project-description">-->
<!--              In partnership with our LANNUAN Cares program, we continue to provide associate-led volunteering opportunities that help support local communities, the environment, and our economies recover and rebuild.-->
<!--            </p>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="project-card">-->
<!--          <div class="project-image">-->
<!--            <a-image src="https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250516142755/20250516142755_6826daeb888d4.webp" alt="LANNUAN Store" :imgStyle="{ 'object-fit': 'cover', 'aspect-ratio': '16 / 9' }" :preview="false"/>-->
<!--          </div>-->
<!--          <div class="project-info">-->
<!--            <h3 class="project-title">Diversity and Inclusion</h3>-->
<!--            <p class="project-description">-->
<!--              We aim for all LANNUAN associates to feel comfortable and safe bringing their authentic selves to work and contributing fully to our shared success. To exemplify this belief as a priority, we've <a href="#" class="text-link">added Diversity and Inclusion </a> to our annual performance review, with plans to redevelop our Diversity and Inclusion Council in Europe as well.-->

<!--            </p>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="project-card">-->
<!--          <div class="project-image">-->
<!--            <a-image src="https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250516142912/20250516142912_6826db3802133.webp" alt="LANNUAN Store" :imgStyle="{ 'object-fit': 'cover', 'aspect-ratio': '16 / 9' }" :preview="false"/>-->
<!--          </div>-->
<!--          <div class="project-info">-->
<!--            <h3 class="project-title">Supporting Our Communities</h3>-->
<!--            <p class="project-description">-->
<!--              In partnership with our <a href="#" class="text-link">LANNUAN Cares program</a>, we continue to provide associate-led volunteering opportunities that help support local communities, the environment, and our economies recover and rebuild.-->
<!--            </p>-->
<!--          </div>-->
<!--        </div>-->
      </div>
    </div>

    <div class=" brand-mission brand-mission2" >
      <h2 class="mission-title">Collective Action & Innovation</h2>
      <p class="mission-text">A brighter prospective for fashion awaits, and we are committed to play our part as contributors to our shared future.</p>
    </div>

    <!-- 时间线区域 -->
    <div class="timeline-section">
      <div class="timeline-horizontal">
        <div class="timeline-track">
          <!-- 2021 -->
          <div class="timeline-item" :class="{ active: activeTimelineIndex === 0 }" @click="setActiveTimeline(0)">
            <div class="timeline-year">2010</div>
            <div class="timeline-marker"></div>
            <div class="timeline-content">
              <p>LANNUAN launched as an online fashion marketplace, offering trendy apparel at competitive prices.</p>
              <p>Integrated global payment solutions to enhance checkout convenience, boosting conversion rates.</p>
            </div>
          </div>

          <!-- 2023 -->
          <div class="timeline-item" :class="{ active: activeTimelineIndex === 1 }" @click="setActiveTimeline(1)">
            <div class="timeline-year">2016</div>
            <div class="timeline-marker"></div>
            <div class="timeline-content">
              <p>30% of our global materials portfolio will be more sustainable</p>
              <p>Establish training program for LANNUAN suppliers in key regions</p>
            </div>
          </div>

          <!-- 2025 -->
          <div class="timeline-item" :class="{ active: activeTimelineIndex === 2 }" @click="setActiveTimeline(2)">
            <div class="timeline-year">2025</div>
            <div class="timeline-marker"></div>
            <div class="timeline-content">
              <p>Launched eco-friendly packaging and a sustainable fashion line, reinforcing brand values.</p>
<!--              <p>Introduce or increase recycling/upcycling initiatives in key regions to truly drive a circular economy</p>-->
<!--              <p>Expand wellness and mental health programs for all employees</p>-->
            </div>
          </div>
        </div>


      </div>
    </div>

    <!-- 参与变革区域 -->
    <div class="brand-mission brand-mission3" >
<!--      <h2 class="mission-title">Be a Part of the Change</h2>-->
<!--      <p class="mission-text">LANNUAN partners with Social Enterprise Homeboy Industries in the United States and Debrand Services in Canada for our in-store recycling project.</p>-->
    </div>


  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';

// 可持续材料数据
const sustainableMaterials = [
  // {
  //   title: "Recycled Cotton",
  //   image:"https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250516140506/20250516140506_6826d5925d187.webp",
  //   description: "This fiber is composed of recycled plastic and bottles, with the aim of giving objects a new life and reduce waste."
  // },
  // {
  //   title: "Recycled Cotton",
  //   image:"https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250516135326/20250516135326_6826d2d620cf4.webp",
  //   description: "This material is made from excess textile and production waste, which is converted into fibers that can be reused for new fabrics."
  // },
  {
    title: "Recycled Wool",
    image:"https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250516140651/20250516140651_6826d5fb30c35.webp",
    description: "Wool production requires a high expenditure of resources – the introduction of recycled wool aims to lower the overall environmental cost."
  },
  {
    title: "Econyl",
    image:"https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250516140810/20250516140810_6826d64aa58af.webp",
    description: "This fiber is made with recovered materials and plastics from the ocean. The goal is to give a second life to waste and lower our environmental impact."
  },
  {
    title: "Organic Cotton",
    image:"https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250516140925/20250516140925_6826d695e35bf.webp",
    description: "This fiber is created using organically grown crops which replenish and maintain soil health and fertility, while avoiding the use of toxic and persistent synthetic pesticides."
  },
  {
    title: "Hemp",
    image:"https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250516141241/20250516141241_6826d7596dabf.webp",
    description: "This material comes from a regenerative plant, allowing the use of natural and sustainable resources, in respect to the environment."
  },
  {
    title: "Linen",
    image:"https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250516141333/20250516141333_6826d78d4178e.webp",
    description: "This fiber is entirely produced from the flax plant, resulting into a fully natural fabric with no production waste."
  },
  {
    title: "Low Environmental Impact Fibers",
    image:"https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250516141402/20250516141402_6826d7aa5789f.webp",
    description: "This fiber comes from responsibly managed forests, is made of renewable raw materials and is manufactured using processes that require less chemicals with lower emissions to the environment. TENCEL™, LENZING™ and ECOVERO™ are trademarks of Lenzing Ag."
  }
];

// 活动索引变量
const activeIndex = ref(0);
const materialsContainerRef = ref<HTMLElement | null>(null);

// 滚动到指定分页
const scrollToIndex = (index: number) => {
  const container = materialsContainerRef.value;
  if (container) {
    // 计算每个索引位置对应的滚动位置
    const itemWidth = container.clientWidth / 4; // 假设一行显示4个
    const scrollAmount = itemWidth * 4 * index; // 每页4个项目
    container.scrollTo({
      left: scrollAmount,
      behavior: 'smooth'
    });
    activeIndex.value = index;
  }
};

// 处理材料容器滚动
const handleMaterialsScroll = () => {
  const container = materialsContainerRef.value;
  if (container) {
    const scrollPosition = container.scrollLeft;
    const containerWidth = container.clientWidth;
    // 计算当前应该是哪个索引活动
    activeIndex.value = Math.round(scrollPosition / containerWidth);
  }
};

// 监听滚动事件更新活动索引
onMounted(() => {
  // 初始化材料区索引
  const container = materialsContainerRef.value;
  if (container) {
    handleMaterialsScroll();
  }
});

// 时间线活动索引
const activeTimelineIndex = ref(0);

// 设置活动时间线并滚动到对应位置
const setActiveTimeline = (index: number) => {
  activeTimelineIndex.value = index;
  const timelineItems = document.querySelectorAll('.timeline-item');
  if (timelineItems[index]) {
    timelineItems[index].scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
  }
};


</script>

<style lang="scss" scoped>
.sustainability-container {
  width: 70%;
  font-family: 'Arial', sans-serif;
  color: #333;

  .hero-banner {
    width: 100%;
    background-color: #e8f0f0;
    background-image: url('https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250516114608/20250516114608_6826b50078708.webp');
    background-size: cover;
    background-position: center;
    padding: 3rem 2rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 300px;

    .logo-container {
      max-width: 1200px;
      margin: 0 auto;
      width: 100%;

      .logo {
        display: flex;
        align-items: center;
        gap: 1rem;



        .brand-text {
          display: flex;
          flex-direction: column;

          .brand-name {
            font-size: 1.5rem;
            font-weight: 500;
            color: #3c5541;
          }

          .brand-slogan {
            font-size: 3rem;
            // font-weight: 300;
            font-family: freight-display-pro, serif;
            color: #3c5541;
          }
        }
      }
    }
  }

  .product-showcase {
    padding: 2rem;
    margin: 0 auto;

    .showcase-grid {
      display: flex;
      gap: 15px;
      // max-width: 1500px;
      margin: 0 auto;
      height: 800px;

      .model-card {
        width: 100%;
        overflow: hidden;
        // background-color: #f9f9f9;
        border-radius: 8px;
        img, .ant-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
          border-radius: 8px;
        }
      }

      // 第1列 - 左侧大图
      .col-1 {
        flex: 1.6;
        height: 100%;

        .ant-image {
          display: block;
          height: 100%;
        }
      }

      // 第2列 - 上文字下图片
      .col-2 {
        flex: 1.3;
        display: flex;
        flex-direction: column;
        height: 100%;

        .eco-message {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 30px;
          background-color: #fff;
          color:#44604A;

          .message-title {
            font-size: 26px;
            font-weight: normal;
            margin-bottom: 5px;
          }

          .message-subtitle {
            font-size: 30px;
            margin-bottom: 10px;
            color: #44604A;
          }

          .message-description {
            font-size: 28px;
            margin-bottom: 0px;
            color: #44604A;
          }

          .shop-button {
            // align-self: flex-start;
            background-color: #f0f2ea;
            border-color: #f0f2ea;
            color: #44604A;
            font-size:24px;
            height:60px;
            padding: 0px 30px;
            border-radius: 10px;
            margin-top: 30px;
            font-weight: bold !important;
            cursor: pointer;
            &:hover {
              background-color: #f0f2ea;
            }
          }
        }

        .model-card {
          flex: 1;
          margin-top: 15px;
        }
      }

      // 第3列 - 两张图片
      .col-3 {
        flex: 1.3;
        display: flex;
        flex-direction: column;
        height: 100%;

        .upper {
          flex: 1.5;
          margin-bottom: 15px;
        }

        .lower {
          flex: 1;
        }
      }

      // 第4列 - 右侧大图
      .col-4 {
        flex: 1.6;
        height: 100%;

        .ant-image {
          display: block;
          height: 100%;
        }
      }
    }
  }

  .materials-section {
    // background-color: #fbfbfb;
    padding: 3rem 2rem;
    margin-top:100px;
    .section-title {
      font-size: 3rem;
      font-weight: 300;
      margin-bottom: 2rem;
      text-align: left;
      font-family: freight-display-pro, serif;
      color:#44604A;
      // max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
    }

    .materials-container {
      // max-width: 1200px;
      margin: 0 auto;
      display: flex;
      gap: 2rem;
      overflow-x: auto; /* u542fu7528u6a2au5411u6edau52a8 */
      padding-bottom: 1.5rem; /* u4e3au6edau52a8u6761u7559u51fau7a7au95f4 */
      scroll-behavior: smooth; /* u5e73u6ed1u6edau52a8 */
      -webkit-overflow-scrolling: touch; /* u63d0u9ad8u79fbu52a8u7aefu6edau52a8u4f53u9a8c */
      scroll-snap-type: x mandatory; /* u6edau52a8u5bf9u9f50u5230u6bcfu4e2au5143u7d20 */

      /* u7f8eu5316u6edau52a8u6761 */
      &::-webkit-scrollbar {
        height: 6px;
      }

      &::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
      }

      &::-webkit-scrollbar-thumb {
        background: #44604A;
        border-radius: 10px;
      }

      .material-image {
        position: relative;
        overflow: hidden;
        cursor: pointer;
        min-width: 25%; /* u786eu4fddu4e00u884cu6700u591au663eu793a4u4e2a */
        flex: 0 0 calc(25% - 1.5rem); /* u8003u8651u95f4u8ddd */
        scroll-snap-align: start; /* u6edau52a8u5bf9u9f50u70b9 */
        aspect-ratio: 3/ 4;

        @media (max-width: 1200px) {
          min-width: 33.33%;
          flex: 0 0 calc(33.33% - 1.5rem);
        }

        @media (max-width: 768px) {
          min-width: 50%;
          flex: 0 0 calc(50% - 1rem);
        }

        @media (max-width: 480px) {
          min-width: 100%;
          flex: 0 0 100%;
        }

        img, .ant-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s ease;
          display: block;
        }

        .material-label {
          position: absolute;
          bottom: 10px;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 10;
          display: flex;
          flex-direction: column;
          padding: 1rem;
          background-color: rgba(255, 255, 255, 0.95);
          transform: translateY(calc(100% - 60px)); /* 只显示标题，隐藏描述 */
          transition: transform 0.3s ease;
          color: #000;
          box-sizing: border-box;

          .material-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            // margin-bottom: 1rem;
            font-weight: 500;
            color:#44604A;
            font-size:30px;
            // height:50px; /* 设置标题高度 */
            .plus-icon {
              font-weight: bold;
              transition: all 0.3s ease;
              position: relative;
              width: 20px;
              height: 20px;
              display: flex;
              align-items: center;
              justify-content: center;

              &:before, &:after {
                content: '';
                position: absolute;
                background-color: #44604A;
                transition: all 0.3s ease;
              }

              &:before {
                width: 100%;
                height: 2px;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
              }

              &:after {
                width: 2px;
                height: 100%;
                left: 50%;
                top: 0;
                transform: translateX(-50%);
              }
            }
          }

          .material-description {
            position: absolute;
            bottom:0;
            color:#44604A;
            font-size:26px;
            // line-height: 1.6;
            text-align: left;
            margin-top: 1rem;
            opacity: 0;
            transition: opacity 0.3s ease;
          }
        }

        &:hover {
          img, .ant-image {
            transform: scale(1.05);
          }

          .material-label {
            transform: translateY(0); /* 滑动到顶部 */

            .plus-icon {
              &:after {
                height: 0; /* 隐藏垂直线，只保留水平线 */
              }
            }

            .material-description {
              opacity: 1;
            }
          }
        }
      }
    }

    .pagination {
      display: flex;
      justify-content: center;
      margin-top: 2rem;

      .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #ccc;
        margin: 0 5px;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          background-color: #999;
          transform: scale(1.2);
        }

        &.active {
          background-color: #44604A;
          transform: scale(1.2);
        }
      }
    }
  }

  .brand-mission {
    padding: 4rem 8rem;
    text-align: left;
    background-color: #e8f0f0;
    background-image: url('https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250516114608/20250516114608_6826b50078708.webp');
    background-size: cover;
    background-position: center;

    .mission-title {
      font-size: 3rem;
      font-weight: 300;
      margin-bottom: 1.5rem;
      color:#44604A;
      font-family: freight-display-pro, serif;
    }

    .mission-text {
      // max-width: 900px;
      // margin: 0 auto;
      line-height: 1.6;
      font-size: 2rem;
      color:#44604A;
    }
  }
  .brand-mission2 {
    background-image: url('https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250516114608/20250516114608_6826b50078708.webp');
  }
  .brand-mission3 {
    background-image: url('https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250516114638/20250516114638_6826b51e0ab1a.webp');

  }
  .responsibility-projects {
    padding: 3rem 2rem;
    // max-width: 1200px;
    margin: 0 auto;

    .project-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 2rem;

      .project-card {
        .project-image {
          margin-bottom: 1.5rem;
          overflow: hidden;
        }

        .project-info {
          .project-title {
            font-size: 2.5rem;
            font-weight: 500;
            margin-bottom: 1rem;
            color: #44604A;
          }

          .project-description {
            // line-height: 1.6rem;
            color: #555;
            font-size: 1.4rem;
            color: #44604A;
            .text-link {
              color: #44604A;
              text-decoration: underline;

              &:hover {
                text-decoration: none;
              }
            }
          }
        }
      }
    }
  }

  .timeline-section {
    padding: 8rem 2rem;
    // background-color: #e8f0f0;
    background-color: white;
    background-size: cover;
    background-position: center;

    .timeline-horizontal {
      max-width: 1800px;
      margin: 0 auto;

      .timeline-track {
        position: relative;
        display: flex;
        gap: 0;
        padding: 3rem 0 6rem 0;
        // margin-bottom: 3rem;
        justify-content: space-between;

        &:before {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          top: 130px; /* u8c03u6574u6a2au7ebfu4f4du7f6eu5230u5706u70b9u4e2du5fc3 */
          height: 5px;
          background-color: #44604A;
          z-index: 0;
        }

        .timeline-item {
          flex: 1 1 33.33%;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          transition: all 0.3s ease;
          position: relative;
          text-align: left;

          &.active {
            .timeline-marker {
              background-color: #44604A;
              border-color: #44604A;
            }

            .timeline-year {
              color: #44604A;
              font-weight: bold;
              font-family: freight-display-pro, serif;
            }
          }

          .timeline-year {
            font-size: 1.8rem;
            margin-bottom: 1rem;
            color: #44604A;
            font-weight: 500;
            transition: color 0.3s ease;
            order: 1;
            align-self: flex-start;
            margin-bottom: 1.5rem;
            font-family: freight-display-pro, serif;
          }

          .timeline-marker {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: white;
            border: 1px solid #44604A;
            z-index: 1;
            transition: all 0.3s ease;
            order: 2;
            margin-bottom: 1.5rem;
            align-self: flex-start;
          }

          .timeline-content {
            text-align: left;
            order: 3;
            color: #44604A;

            p {
              margin-bottom: 0.8rem;
              font-size: 25px;
              line-height: 1.5;
              max-width: 90%;

              &:last-child {
                margin-bottom: 0;
              }
            }
          }
        }
      }
    }
  }

  .call-to-action {
    padding: 4rem 2rem;
    background-color: #e8f0f0;
    background-image: url('/images/sustainability/cta-bg.jpg');
    background-size: cover;
    background-position: center;

    .cta-title {
      font-size: 2rem;
      font-weight: 300;
      margin-bottom: 1rem;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
    }

    .cta-text {
      max-width: 1200px;
      margin: 0 auto 3rem;
      line-height: 1.6;
    }

    .recycling-program {
      max-width: 1200px;
      margin: 0 auto 3rem;

      .program-title {
        font-size: 1.5rem;
        font-weight: 500;
        margin-bottom: 0.5rem;
      }

      .program-subtitle {
        font-size: 1.1rem;
        color: #555;
        margin-bottom: 2rem;
      }


    }


  }


}

:where(.css-dev-only-do-not-override-12unj27).ant-btn-primary {

    box-shadow:none;
}


</style>
